<template>
    <qly-base-page ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="0">
        <template #navbar>
            <qly-nav-bar :title="$t('common.evaluate')">
                <template #right>
                    <uni-icons type="search" size="28" @click="openSearch"/>
                </template>
            </qly-nav-bar>
        </template>
        <template #header>
            <view class="tr-search-box">
                <up-search :placeholder="searchPlaceholder" v-model="params.keyword"></up-search>
                <up-tabs :list="tabsList" keyName="name"></up-tabs>
            </view>
        </template>
        
        <tr-search ref="searchRef" v-model="params" :search-params="searchParams" @search="search"/>
        
        <view>
            <tr-card v-for="(item,index) in 10" :key="index" margin="12rpx 18rpx" borderRadius="12rpx">
                <view class="card-row row-between">
                    <view>{{$t('common.evaluation')}}&nbsp;{{$t('common.date')}}：2025-05-05</view>
                    <view>
                        <up-rate count="5" v-model="value" size="20" activeColor="orange"></up-rate>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.orderNumber')}}：</view>
                        <view class="value">123456</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.travel')}}&nbsp;{{$t('common.date')}}：</view>
                        <view class="value">2025-05-05</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.customers')}}&nbsp;{{$t('common.name')}}：</view>
                        <view class="value">17897897897</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.customers')}}&nbsp;{{$t('common.phone')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                
                <view class="card-row row-between">
                    <view class="left-text">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</view>
                <view class="num">x2</view>
                </view>
                
                <view class="gray-text fs-26">{{$t('common.remark')}}：拍照的具体金额不是很对，请重新核对后再申请</view>
                
            </tr-card>
        </view>
    </qly-base-page>
    
    <qly-draggable >
        <view class="update-box" @tap="placeOrder">
            {{$t('common.placeOrder')}}
        </view>
    </qly-draggable>
</template>
<script setup>

const searchPlaceholder=computed(()=>{
    return $t('common.pleaseEnter')+' '+$t('common.customers')+'、'+$t("common.name")
})
const value=ref(2)
const searchRef = ref()
const params = ref({
    status: '',
    myPublishFlag: true,
    type:1
})
const tabsList=computed(()=>{
    return [
        {name: $t('common.one')+$t('common.star')+'(23)'},
        {name: $t('common.two')+$t('common.star')+'(23)'},
        {name: $t('common.three')+$t('common.star')+'(23)'},
        {name: $t('common.four')+$t('common.star')+'(23)'},
        {name: $t('common.five')+$t('common.star')+'(23)'},
    ]
})
const searchParams = computed(()=>{
    return [
        {
            prop: 'name',
            label: $t('common.customers')+$t('common.name'),
            type: 'input',
        },
        {
            prop: 'phone',
            label: $t('common.customers')+$t('common.phone'),
            type: 'input',
        },
        {
            prop: 'phone',
            label: $t('common.orderNumber'),
            type: 'input',
        },
        {
            prop: 'phone',
            label: $t('common.travel')+$t('common.date'),
            type: 'daterange',
        },
        {
            prop: 'evaluation',
            label: $t('common.evaluation')+$t('common.date'),
            type: 'daterange',
        },
    ]
})

const openSearch=()=>{
    searchRef.value.open()
}

const search=()=>{
    console.log('search',params.value)
}

// 去下单
const placeOrder=()=>{
    qly.page.open('/pages/my/placeOrder/save')
}
</script>
<style scoped lang="scss">
.header-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 18rpx;
}
.btns-box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24rpx;
}
.red-text{
    margin-top: 12rpx;
}
.update-box{
    width: 120rpx;
    height: 120rpx;
    background-color: #5572f0;
    color: #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.left-text{
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.num{
    color: #606266;
    padding-left: 24rpx;
}
:deep(.tr-tabs-box){
    padding-bottom: 0;
}
</style>
